<template>
	<view class="login">
		<Header title="账号注册" color="#fff"></Header>
		<view class="main">

			<view class="piece">
				<text>账号:</text>
				<input type="number" maxlength="11" v-model="phone" placeholder="请输入账号" placeholder-style="color:#A1A1A1;" />
				<view class="time_btn" @tap="getcode">{{ yanzhengma }}</view>
			</view>
			<view class="piece">
				<text>验证码</text>
				<input type="tel" v-model="code" placeholder-style="color:#A1A1A1;" placeholder="请输入验证码" />
				
			</view>
			<view class="piece">
				<text>邀请码</text>
				<input type="tel" v-model="invite" placeholder="请输入邀请码" />
			</view>
			<view class="piece">
				<text>登录密码:</text>
				<input @input="onKeyVinInput(password)" v-model="password" type="password" placeholder="请输入密码"
					placeholder-style="color:#A1A1A1;" />
			</view>
			<view class="piece">
				<text>确认密码:</text>
				<input @input="onKeyVinInput2(surepassword)" v-model="surepassword" type="password" placeholder="请确认密码"
					placeholder-style="color:#A1A1A1;" />
			</view>

			<div class="piece2 cen human-check" id="human-check"></div>
			
			<!-- <view class="reg">
				<text @click="$p.back()">返回登录</text>
			</view> -->

			<view class="login_bottom">
				<view class="button btn " @click="reg">
					立 即 注 册
				</view>
			</view>

			<u-checkbox-group class="checkgroup">
				<u-checkbox v-model="checked" shape="" :label-disabled="false" size="28"
					active-color="#6FE6FC" class="checkbox">
					<view class="explain">
						<span>注册即表示同意</span>
						<text class="yellow" @click="xieyi">《用户协议》</text>
						<span>和</span>
						<text class="yellow" @click="yinsi">《隐私政策》</text>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
	</view>
</template>

<script>
	var _this, js;
	var sessionId = "";
	var sig = 0;
	var token = "";
	var yp_check = false;
	export default {
		data() {
			return {
				second: 0, //倒计时
				showPassword: false,
				showPassword2: false,
				checked: false,
				phone: "",
				code: "",
				invite: "",
				password: "",
				surepassword: "",
				ischecked: false,
			};
		},
		computed: {
			yanzhengma() {
				if (this.second == 0) {
					return "获取";
				} else {
					if (this.second < 10) {
						return "重新获取0" + this.second;
					} else {
						return "重新获取" + this.second;
					}
				}
			},
		},


		deactivated() {
			if (document.querySelector("#human-check")) {
				document.querySelector("#human-check").innerHTML = "";
			}
			if (window.ic) window.ic = null;
		},
		activated() {
			document.querySelector("#human-check").innerHTML = "";
			if (window.ic) window.ic = null;
			this.ypInit();
		},
		created() {
			setTimeout(() => {
				this.ypInit()
			}, 400);
		},

		onLoad() {
			//  this.$nextTick(() => {
			// 	document.querySelector("#human-check").innerHTML = "";

			// 	if (window.ic) window.ic = null;
			// 	this.ypInit();
			// 	});
		},
		onUnload() {
			clearInterval(js);
			this.second = 0;
		},
		methods: {
			xieyi() {
				uni.navigateTo({
					url: './agreement'
				});
			},
			yinsi() {
				uni.navigateTo({
					url: './privacy'
				});
			},

			// 密码查看
			display() {
				this.showPassword = !this.showPassword;
			},
			// 密码查看
			display2() {
				this.showPassword2 = !this.showPassword2;
			},

			// 监听密码输入只允许数字和字母
			onKeyVinInput(event) {
				var value = event;
				if (!value || value == " ") {
					return "";
				}
				// 数字和字母
				const rule = /[\W]/g;
				this.$nextTick(() => {
					this.password = value.replace(rule, "");
				});
			},
			onKeyVinInput2(event) {
				var value = event;
				if (!value || value == " ") {
					return "";
				}
				// 数字和字母
				const rule = /[\W]/g;
				this.$nextTick(() => {
					this.surepassword = value.replace(rule, "");
				});
			},

			register() {
				uni.navigateTo({
					url: "./register",
				});
			},
			// 自定义返回事件
			back() {
				uni.reLaunch({
					url: "./login",
				});
			},


			// 获取验证码
			async getcode() {
				
				// #ifdef H5
				let istop = window.top == window.self
				if(!istop) {
					// console.log(istop,1);
					return
				}
				// #endif
				
				if (this.phone == "" || this.phone == null) {
					this.$u.toast("请先输入账号");
				} else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					this.$u.toast("手机号有误");
				} else if(!yp_check){
					this.$u.toast("请点击下方按钮进行验证");
				}else {
					if (this.second > 0) {
						return;
					}
					this.second = 60;
					let res = await this.$http.index.sendSms({
						mobile: this.phone,
						sessionId: sessionId,
						sig: sig,
						token: token
					})
					if (res.code == 0) {
						this.$u.toast(res.msg);
						js = setInterval(() => {
							this.second--
							if (this.second == 0) {
								clearInterval(js);
							}
						}, 1000);
					} else {
						this.second = 0;
						this.$u.toast(res.msg);
						this.ypInit()
					}
				}
			},

			// 注册事件
			async reg() {
				if (this.phone == "" || this.phone == null) {
					this.$u.toast("手机号不能为空");
				} else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					this.$u.toast("手机号有误");
				} else if(this.code == '' || this.code == null){
					this.$u.toast("验证码不能为空");
				}else if (this.password == "" || this.password == null) {
					this.$u.toast("密码不能为空");
				} else if (this.surepassword == "" || this.surepassword == null) {
					this.$u.toast("请确认密码");
				} else if(!yp_check){
					this.$u.toast("请点击下方按钮进行验证");
				} else if (!this.checked) {
					this.$u.toast("请勾选并同意用户协议与隐私政策");
				} else {
					let res = await this.$http.index.reg({
						mobile: this.phone,
						pwd: this.password,
						repwd: this.surepassword,
						invite_code: this.invite,
						sms_code: this.code,
						sessionId: sessionId,
						sig: sig,
						token: token
					});
					if (res.code == 1) {
						this.$u.toast('注册成功，正在为您跳转至登录页...');
						setTimeout(function() {
							uni.reLaunch({
								 url: '/pages/login/login'
							});
						}, 2000);
					} else {
						this.ypInit()
						this.$u.toast(res.msg);
					}
				}
			},

			// 云片验证
			ypInit() {
				if (window.ic && yp_check) {
					yp_check = 0;
					return ic.reset()
				}
				if (window.ic) {
					return yp_check = 0
				}
				// 实例化ic对象
				AWSC.use("ic", function(state, module) {
					// 初始化
					window.ic = module.init({
						// 应用类型标识。它和使用场景标识（scene字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
						appkey: "FFFF0N0000000000A00B",
						// 使用场景标识。它和应用类型标识（appkey字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
						scene: "ic_register_h5",
						// 声明智能验证需要渲染的目标元素ID。
						renderTo: 'human-check',
						// 验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
						success: function(data) {
							// console.log(data);
							sessionId = data.sessionId
							sig = data.sig
							token = data.token
							yp_check = true
						},
						// 验证失败时触发该回调参数
						fail: function(failCode) {
							// console.log(failCode)
						},
						// 验证码加载异常时触发该回调参数
						error: function(errorCode) {
							// console.log(errorCode)
						}
					});
				})
			},
		},

	}
</script>

<style lang="less">
	.login {
		background: url('http://img.cpgm.cc/panda/static/login/bg.jpg');
		background-size: 100% 100%;
		min-height: 100vh;
	}

	.main {
		padding: 20px 12px 12px;
	}

	.topbox {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 80px;
		}

		text:nth-child(2) {
			color: #000000;
			font-size: 16px;
			margin-top: 10px;
			font-weight: 600;
		}

		text:nth-child(3) {
			color: #4938AE;
			font-size: 13px;
			margin-top: 10px;
			font-weight: 600;
		}
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40px;

		text {
			position: relative;
			color: #131314;
			font-size: 16px;
			margin: 0 10px;
			font-weight: 600;
			z-index: 99;
		}

		text::before {
			content: '';
			position: absolute;
			left: 15%;
			top: 0;
			width: 30px;
			height: 100%;
			border-radius: 20%;
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
			z-index: -1;
		}

		image {
			width: 12px;
		}
	}



	.piece {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 15px;
		margin: 10px 0;
		background: rgba(242,242,242,0.95);
		border-radius: 7px;
	}

	.time_btn {
		position: absolute;
		right: 15px;
		width: 91px;
		height: 36px;
		background: linear-gradient(90deg, #77FFFF 0%, #248EF6 100%);
		box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.3);
		border-radius: 4px;
		border: 1px solid #000000;
		color: #000;
		font-size: 14px;
		line-height: 36px;
		text-align: center;
		font-weight: 600;
	}

	.piece2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 10px;
		margin: 10px 0;
		background: rgba(242,242,242,0.95);
		border-radius: 7px;
	}

	.piece text {
		width: 20%;
		font-size: 14px;
		font-weight: 600;
	}

	.piece image {
		width: 20px;
		height: 20px;
	}

	.piece input {
		width: 80%;
		font-size: 14px;
		color: #131314;
	}

	.cen {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-content: center;
		justify-content: center;
		color: #fff;
	}


	.reg {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 5px;
		font-size: 12px;
	}

	.reg text {
		color: #fff;
		font-weight: 600;
	}

	.btn {
		font-size: 14px;
		width: 90%;
		margin: 0 auto;
		margin-top: 4vh;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #000;
		background: linear-gradient(90deg, #77FFFF 0%, #248EF6 100%);
		box-shadow: inset 0px 4px 0px 0px rgba(0,0,0,0.5);
		border-radius: 7px;
		font-weight: 600;
		font-size: 18px;
	}

	.checkgroup {
		width: 100%;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
		margin-top: 15px;
	}

	.checkbox {
		margin: 0 auto;
	}
	.explain {
		font-size: 12px;
		color: #343434;
		font-weight: 600;
	}

	.yellow {
		font-size: 12px;
		color: #fff;
		font-weight: 600;
	}


	::v-deep #SM_BTN_WRAPPER_1 {
		width: 100% !important;
	}

	::v-deep #SM_BTN_1 {
		width: 100% !important;
	}

	::v-deep #rectMask {
		width: 100% !important;
	}
	
/deep/ .u-checkbox__icon-wrap--checked {
	background:  linear-gradient(90deg, #77FFFF 0%, #248EF6 100%) !important; 
}

</style>